<template>
  <div class="integral" id="exit">
    <van-nav-bar title="积分" @click-right="onClickRight" fixed>
      <van-icon name="question-o" slot="right" />
    </van-nav-bar>
    <div class="integral-body">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img :src="banner" alt class="banner_img" />
        </van-swipe-item>
      </van-swipe>
      <div class="integral-my">
        <p @click="$router.push({ name: 'integralDeclare' })">积分申报</p>
        <p></p>
        <p @click="$router.push({ name: 'myIntegral' })">我的积分</p>
      </div>
      <div>
        <van-tabs @click="tabClick" v-model="activeName">
          <van-tab
            v-for="(item, index) in identityLists"
            :name="item.id"
            :key="index"
            :title="item.name"
          >
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :offset="50"
              >
                <van-cell
                  v-for="(item1, index1) in identityListNames"
                  :key="index1"
                  :value="item1.score ? item1.score :0 + '积分'"
                >
                  <template slot="title">
                    <svg-icon
                      v-if="index1 === 0"
                      icon-class="我的积分-排名1"
                      widthW="1.5em"
                      heightH="1.5em"
                    ></svg-icon>
                    <svg-icon
                      v-if="index1 === 1"
                      icon-class="我的积分-排名2"
                      widthW="1.5em"
                      heightH="1.5em"
                    ></svg-icon>
                    <svg-icon
                      v-if="index1 === 2"
                      icon-class="我的积分-排名3"
                      widthW="1.5em"
                      heightH="1.5em"
                    ></svg-icon>
                    <span class="custom-title" v-if="index1 > 2">{{ index1 + 1 }}</span>
                    <van-image height="50" width="50" v-if="item1.headImg !== null" lazy-load round :src="item1.headImg" :error-icon="src"/>
                    <van-image height="50" width="50" v-if="item1.headImg === null" lazy-load round :src="defultImg" />
                    <span class="custom-title">{{item1.username}}</span>
                  </template>
                </van-cell>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue';
// import { Lazyload } from 'vant';
import integral from "../../controller/integral";
import constant from "@/controller/constant.js";
// Vue.use(Lazyload, {
//   error: require('@/assets/err.png')
// });
export default {
  data() {
    return {
      src: require('@/assets/err.png'),
      identityLists: [],
      identityListNames: [],
      activeName: "",
      userId: "",
      identityId: "",
      curPage: 1,
      pageSize: 10,
      loading: false,
      finished: true,
      isLoading: false,
      errImg: require('@/assets/err.png'),
      defultImg: require("@/icons/img/head.png"),
      banner: require("../../icons/img/banner.png")
    };
  },
  mounted() {
    this.integral_identity();
  },
  methods: {
    // 刷新
    onLoad() {
      let that = this;
      that.isLoading = false;
      that.onRefresh();
    },
    // 刷新
    onRefresh() {
      let that = this;
      // that.isLoading = false;
      // if (!that.finished) {
      that.curPage += 1;
      that.isLoading = false;
      that.getIntegralIdentityList(that.identityId);
      // }
    },
    tabClick(name) {
      let that = this;
      that.identityId = name;
      that.identityListNames = [];
      that.curPage = 1;
      that.getIntegralIdentityList(name);
    },
    getIntegralIdentityList(id) {
      let that = this;
      if (!id) return;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });
      integral
        .integral_identityList(that.pageSize, that.curPage, id)
        .then(res => {
          if (res.code == "0") {
            that.finished = false;
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              // that.$toast("暂无更多数据");
              that.loading = false;
              that.isLoading = false;
              that.finished = true;
              return;
            }
            that.$nextTick(() => {
              that.loading = false;
              that.isLoading = false;
            });
            if (res.datas.records.length < that.pageSize) {
              that.finished = true;
            }
            if (
              res.datas &&
              res.datas.records.length !== 0 &&
              res.datas !== null
            ) {
              that.identityListNames = [
                ...that.identityListNames,
                ...res.datas.records
              ];
              this.$toast.clear();
              // this.names = res.datas.map(item => item.identityName);
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {
          this.$toast(constant.unusualMsg);
        });
    },
    // 获取身份id
    integral_identity() {
      let that = this;
      integral.integral_identity_choose().then(res => {
        if (res.code == "0") {
          if (res.datas && res.datas.length !== 0) {
            that.identityLists = res.datas;
            that.getIntegralIdentityList(res.datas[0].id);
            that.identityId = res.datas[0].id;
          }
        } else {
          if (res && res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast(constant.unusualMsg);
          }
        }
      });
    },
    onClickRight() {
      this.$router.push({ name: "integralIntroduced" });
    }
  }
};
</script>

<style lang="scss" scoped>
.integral {
  .integral-body {
    padding-top: 46px;
  }
  /deep/ .van-swipe {
    height: 200px;
  }
  /deep/ .my-swipe .van-swipe-item {
    color: #fff;
    width: 85%;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #fff;
    .banner_img {
      width: 100%;
    }
  }
  .integral-my {
    padding: 10px 20px;
    display: flex;
    > p:nth-child(2) {
      border-left: 2px solid #ccc;
      width: 0;
    }
    > p {
      width: 50%;
      text-align: center;
      font-size: 16px;
    }
  }

  /deep/ .van-cell__title {
    display: flex;
    align-items: center;
    width: 80%;
    > span:nth-child(1) {
      width: 13%;
    }
    > div {
      width: 50px;
      height: 40px;
      margin: 0 20px;
    }
    .custom-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  /deep/ .van-tab__pane {
    padding: 10px 15px;
  }
  /deep/ .van-cell__value {
    margin-top: 10px;
  }
  /deep/ .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
}
</style>
